<template>
    <div id="index">
        <dv-full-screen-container class="bg">
            <dv-loading v-if="loading">Loading...</dv-loading>
            <div v-else class="host-body">
                <div class="d-flex jc-center">
                    <dv-decoration-10 style="width: 33.3%; height: 0.1825rem;" />
                    <div class="d-flex jc-center">
                        <dv-decoration-8 :color="['#568aea', '#000000']" style="width: 8.5rem; height: 3.625rem;" />
                        <div class="title">
                            <span class="title-text">基站电能监控平台</span>
                            <dv-decoration-6
                                class="title-bottom"
                                :reverse="true"
                                :color="['#50e3c2', '#67a1e5']"
                                style="width: 11.125rem; height: 0.5rem;"
                            />
                        </div>
                        <dv-decoration-8
                            :reverse="true"
                            :color="['#568aea', '#000000']"
                            style="width: 8.5rem; height: 3.625rem;"
                        />
                    </div>
                    <dv-decoration-10 style="width: 33.3%; height: 0.1825rem; transform: rotateY(180deg);" />
                </div>

                <!-- 第二行 -->
        
                <div class="body-box">
          <!-- 第三行数据 -->
          <div class="content-box">
            <div>
              <dv-border-box-12>
                <centerLeft1 />
              </dv-border-box-12>
            </div>
            <div>
              <dv-border-box-12>
                <centerLeft2 />
              </dv-border-box-12>
            </div>
            <!-- 中间 -->
            <div>
              <center />
            </div>
            <!-- 中间 -->
            <div>
              <centerRight2 />
            </div>
            <div>
              <dv-border-box-13>
                <centerRight1 />
              </dv-border-box-13>
            </div>
          </div>

          <!-- 第四行数据 -->
          <div class="bototm-box">
            <dv-border-box-13>
              <buttomLeft />
            </dv-border-box-13>
            <dv-border-box-12>
              <buttomRight />
            </dv-border-box-12>
          </div>
        </div>
            </div>
        </dv-full-screen-container>
    </div>
</template>
<script>
import centerLeft1 from "./centerLeft1";
import centerLeft2 from "./centerLeft2";
import center from "./center";
import centerRight2 from "./centerRight2";
import centerRight1 from "./centerRight1";
import buttomLeft from "./buttomLeft";
import buttomRight from "./buttomRight";
export default {
    components: {
        centerLeft1,
        centerLeft2,
        center,
        centerRight2,
        centerRight1,
        buttomLeft,
        buttomRight
    },
    data() {
        return {
            loading: true
        }
    },
    mounted() {
        this.cancelLoading()
    },
    methods: {
        cancelLoading() {
            setTimeout(() => {
                this.loading = false
            }, 500)
        }
    }
} 
</script>
<style lang="scss">
@import './../../assets/styles/index.scss';
</style>